<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻列表案例</title>
  <!-- 引入 Vue 插件 -->
  <script src="./js/vue@3.5.13.js"></script>
  <!-- 引入 axios 插件 -->
  <script src="./js/axios.js"></script>
  <style>
    /* 简单样式示例（可根据需求补充） */
    .news-box { width: 800px; margin: 20px auto; }
    .news-item { display: flex; padding: 15px; border-bottom: 1px solid #eee; }
    .news-item-left { flex: 1; margin-right: 15px; }
    .news-item-right { width: 120px; height: 80px; }
    .news-item-right img { width: 100%; height: 100%; object-fit: cover; }
    .title { font-size: 18px; margin-bottom: 8px; }
    .info { color: #999; font-size: 14px; }
  </style>
</head>
<body>
  <div id="app">
    <div class="news-box">
      <div class="news-item" v-for="item in newList" :key="item.id">
        <!-- 左边 -->
        <div class="news-item-left">
          <div class="title">{{ item.title }}</div>
          <div class="info">
            <span>{{ item.source }}</span>
            <span>{{ item.time }}</span>
          </div>
        </div>
        <!-- 右边 -->
        <div class="news-item-right">
          <img :src="item.img" alt="">
        </div>
      </div>
    </div>
  </div>

  <script>
    console.log(Vue, axios);
    const { createApp, onMounted, ref } = Vue
    createApp({
      setup() {
        // 声明新闻列表（响应式数据）
        let newList = ref([])

        // 生命周期函数：组件挂载后执行
        onMounted(async () => {
          // 请求数据（通过axios调用接口）
          let res = await axios.get("http://hmajax.itheima.net/api/news")
          console.log(res.data.data); // 打印接口返回的新闻数据
          newList.value = res.data.data // 将数据赋值给响应式变量
        })

        // 暴露数据给模板
        return { newList }
      }
    }).mount("#app")
  </script>
</body>
</html>